<!DOCTYPE html  >
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <link th:href="@{/erp/assets/css/bootstrap.min.css}" rel="stylesheet"/>
        <link rel="stylesheet" th:href="@{/erp/css/style.css}"/>
        <link th:href="@{/erp/assets/css/codemirror.css}" rel="stylesheet">
        <link rel="stylesheet" th:href="@{/erp/assets/css/ace.min.css}"/>
        <link rel="stylesheet" th:href="@{/erp/font/css/font-awesome.min.css}"/>
        <link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome.min.css}"/>
        <link rel="stylesheet" th:href="@{/erp/assets/css/ace-ie.min.css}"/>
        <script th:src="@{/erp/js/jquery-1.9.1.min.js}"></script>
        <script th:src="@{/erp/assets/js/bootstrap.min.js}"></script>
        <script type="text/javascript" th:src="@{/erp/Widget/Validform/5.3.2/Validform.min.js}"></script>
        <script th:src="@{/erp/assets/js/typeahead-bs2.min.js}"></script>
        <script th:src="@{/erp/assets/js/jquery.dataTables.min.js}"></script>
        <script th:src="@{/erp/assets/js/jquery.dataTables.bootstrap.js}"></script>
        <script th:src="@{/erp/assets/layer/layer.js}" type="text/javascript"></script>
        <script th:src="@{/erp/js/lrtk.js}" type="text/javascript"></script>
        <script th:src="@{/erp/assets/layer/layer.js}" type="text/javascript"></script>
        <script th:src="@{/erp/assets/laydate/laydate.js}" type="text/javascript"></script>
        <title>管理员</title>
    </head>

    <body>
        <div class="page-content clearfix">
            <div class="administrator">
                <div class="d_Confirm_Order_style">
                    <div class="search_style">
                        <ul class="search_content clearfix">
                            <li>
                                <label class="l_f">角色名称</label>
                                <input name="roleName" id="roleName" type="text" class="text_add" placeholder=""
                                       style="width:400px"/>
                            </li>
                            <li style="width:90px;">
                                <button type="button" class="btn_search" id="btn_search"><i class="fa fa-search"></i>查询
                                </button>
                            </li>
                        </ul>
                    </div>
                    <!--操作-->
                    <div class="border clearfix"> <span class="l_f">
        <!-- <a href="javascript:ovid()" id="administrator_add" class="btn btn-warning"><i class="fa fa-plus"></i> 添加角色</a>--> 
        <a href="/role/toaddRole" id="Competence_add" class="btn btn-warning" title="添加角色"><i
                class="fa fa-plus"></i> 添加角色</a>
        <a id="deleteRoles" class="btn btn-danger"><i class="fa fa-trash"></i> 批量删除</a>
        </span> <span class="r_f">共：<b>5</b>人</span></div>
                    <div class="table_menu_list" id="testIframe">
                        <table class="table table-striped table-bordered table-hover" id="sample_table">
                            <thead>
                            <tr>
                                <th width="25px"><label>
                                    <input type="checkbox" class="ace">
                                    <span class="lbl"></span></label></th>
                                <th width="80px">序号</th>
                                <th width="220px">角色名</th>
                                <th width="100px">角色描述</th>
                                <th width="100px">添加人</th>
                                <th width="180px">加入时间</th>
                                <th width="70px">状态</th>
                                <th width="200px">操作</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!--添加管理员-->
        <div id="add_administrator_style" class="add_menber" style="display:none">
            <form action="" id="form-admin-add">

                <center>
                    <div id="staffData">

                    </div>
                    <input class="btn btn-primary radius" type="submit" id="Add_Administrator"
                           value="&nbsp;&nbsp;确定&nbsp;&nbsp;">
                </center>

            </form>
        </div>
        </div>
    </body>
</html>
<script type="text/javascript">
    var indexID = null;
    jQuery(function ($) {
        var table = $('#sample_table').DataTable({
            iDisplayLength: 5, //默认显示的记录数
            aLengthMenu: [5, 10, 15, 20, 50, 100], //更改显示记录数选项
            bFilter: false, //是否启动过滤、搜索功能
            "ordering": false,
            "bStateSave": false,//状态保存
            "serverSide": true,		//打开服务器模式
            ajax: {
                "url": "/role/list",  // 异步传输的后端接口url
                "type": "POST",
                dataSrc: "data",
                data: function (d) {
                    var param = {};
                    param.draw = d.draw;
                    param.start = d.start;
                    param.length = d.length;
                    return param;//自定义需要传递的参数。
                },
            },
            'autoWidth': true,
            "columns": [
                {
                    "data": "id",
                    "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).empty().append('<label><input type="checkbox" value="' + rowData.id + '" id="ID" name="roleId"  class="ace"><span\n' +
                            '                                            class="lbl"></span></label>');

                    }
                },
                {"data": "roleNum"},
                {"data": "roleName"},
                {"data": "roleDescribe"},
                {"data": "createUser"},
                {"data": "roleDate"},
                {
                    "data": "roleStatues",
                    "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData == "Y") {
                            var span = $('<span></span>').text("已启用").addClass("label label-success radius");
                            $(td).empty().addClass("td-status").append(span);
                        } else {
                            var span = $('<span></span>').text("已停用").addClass("label label-defaunt radius");
                            $(td).empty().addClass("td-status").append(span);
                        }
                    }
                },
                {
                    "data": "roleStatues",
                    "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData == "Y") {
                            $(td).empty().append('<td class="td-manage"><a  value="" onClick="member_stop(this,\'' + rowData.id + '\',\'' + rowData.roleName + '\')"  href="javascript:;" title="停用"  class="btn btn-xs btn-success status"> <i class="fa fa-check  bigger-120"></i></a> ' +
                                '<a title="编辑"  href="/role/toupdateRole?id=' + rowData.id + '" value="' + rowData.roleName + '" class="btn btn-xs btn-info property_edit  " ><i class="fa fa-edit bigger-120"></i></a> ' +
                                '<a title="删除" href="javascript:;" onClick="member_del(this,\'' + rowData.id + '\',\'' + rowData.roleName + '\')" class="btn btn-xs btn-danger" ><i class="fa fa-trash  bigger-120"></i></a> ' +
                                ' <a title="分配员工"  href="javascript:;"  onclick="yuangong(\'' + rowData.id + '\')" class="btn btn-xs btn-warning" ><i class="fa icon-group  bigger-120"> </i> </a> ');
                        } else {
                            $(td).empty().append('<td class="td-manage"><a  value="" onClick="member_start(this,\'' + rowData.id + '\',\'' + rowData.roleName + '\')"  href="javascript:;" title="启用"  class="btn btn-xs status"><i class="fa fa-check  bigger-120"></i></a> ' +
                                '<a title="编辑" href="/role/toupdateRole?id=' + rowData.id + '"  value="' + rowData.roleName + '" class="btn btn-xs btn-info property_edit  " ><i class="fa fa-edit bigger-120"></i></a> ' +
                                '<a title="删除" href="javascript:;" onClick="member_del(this,\'' + rowData.id + '\',\'' + rowData.roleName + '\')" class="btn btn-xs btn-danger" ><i class="fa fa-trash  bigger-120"></i></a> ' +
                                ' <a title="分配员工"  href="javascript:;"  onclick="yuangong(\'' + rowData.id + '\')" class="btn btn-xs btn-warning" ><i class="fa icon-group  bigger-120"> </i> </a> ');
                        }
                    }
                }
            ],
            "aoColumnDefs": [
                //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                {"orderable": false, "aTargets": [0, 2, 3, 4, 5, 6, 7,]}// 制定列不参与排序
            ]
        });
        $('table th input:checkbox').on('click', function () {
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function () {
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });

        });
        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});

        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();
            var off2 = $source.offset();
            var w2 = $source.width();
            if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2)) return 'right';
            return 'left';
        }
    });
    //模糊查询
    $("#btn_search").on('click', function () {
        var roleName = $("#roleName").val();
        var table = $('#sample_table').DataTable({
            iDisplayLength: 5, //默认显示的记录数
            "serverSide": true, // true表示使用后台分页
            destroy: true,
            ajax: {
                url: "/role/like",  // 异步传输的后端接口url
                type: "POST",
                data: {roleName: roleName}
                ,
            },
            "bStateSave": true,//状态保存
            'autoWidth': true,
            "columns": [
                {
                    "data": "id",
                    "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).empty().append('<label><input type="checkbox" value="' + rowData.id + '" id="ID" name="roleId"  class="ace"><span\n' +
                            '                                            class="lbl"></span></label>');
                    }
                },
                {"data": "roleNum"},
                {"data": "roleName"},
                {"data": "roleDescribe"},
                {"data": "createUser"},
                {"data": "roleDate"},
                {
                    "data": "roleStatues",
                    "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData == "Y") {
                            var span = $('<span></span>').text("已启用").addClass("label label-success radius");
                            $(td).empty().addClass("td-status").append(span);
                        } else {
                            var span = $('<span></span>').text("已停用").addClass("label label-defaunt radius");
                            $(td).empty().addClass("td-status").append(span);
                        }
                    }
                },
                {
                    "data": "roleStatues",
                    "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData == "Y") {
                            $(td).empty().append('<td class="td-manage"><a  value="" onClick="member_stop(this,\'' + rowData.id + '\',\'' + rowData.roleName + '\')"  href="javascript:;" title="停用"  class="btn btn-xs btn-success status"> <i class="fa fa-check  bigger-120"></i></a> ' +
                                '<a title="编辑" href="/role/toupdateRole?id=' + rowData.id + '" value="' + rowData.roleName + '" class="btn btn-xs btn-info property_edit  " ><i class="fa fa-edit bigger-120"></i></a> ' +
                                '<a title="删除" href="javascript:;" onClick="member_del(this,\'' + rowData.id + '\',\'' + rowData.roleName + '\')" class="btn btn-xs btn-danger" ><i class="fa fa-trash  bigger-120"></i></a> ' +
                                ' <a title="分配员工"  href="javascript:;"  onclick="yuangong(\'' + rowData.id + '\')" class="btn btn-xs btn-warning" ><i class="fa icon-group  bigger-120"> </i> </a> ');
                        } else {
                            $(td).empty().append('<td class="td-manage"><a  value="" onClick="member_start(this,\'' + rowData.id + '\',\'' + rowData.roleName + '\')"  href="javascript:;" title="启用"  class="btn btn-xs status"><i class="fa fa-check  bigger-120"></i></a> ' +
                                '<a title="编辑" href="/role/toupdateRole?id=' + rowData.id + '" value="' + rowData.roleName + '" class="btn btn-xs btn-info property_edit  " ><i class="fa fa-edit bigger-120"></i></a> ' +
                                '<a title="删除" href="javascript:;" onClick="member_del(this,\'' + rowData.id + '\',\'' + rowData.roleName + '\')" class="btn btn-xs btn-danger" ><i class="fa fa-trash  bigger-120"></i></a> ' +
                                ' <a title="分配员工"  href="javascript:;"  onclick="yuangong(\'' + rowData.id + '\')" class="btn btn-xs btn-warning" ><i class="fa icon-group  bigger-120"> </i> </a> ');
                        }
                    }
                }
            ],
            "aoColumnDefs": [
                //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                {"orderable": false, "aTargets": [0, 2, 3, 4, 5, 6, 7,]}// 制定列不参与排序
            ]
        });
    })
    //    //修改角色
    //    $('table').on('click', '.property_edit', function () {
    //        aler("ddd");
    //        var roleName = $(this).attr('value');
    //        if(roleName == "admin"){
    //            layer.msg('超级管理员无法修改！', {icon: 2});
    //            return
    //        }
    //
    //    })
    function yuangong(id) {
        //分配员工
        $.post("/role/bindingStaff", function (res) {
            var staffsData = res.data;
            if (res.rs = true) {
                var staffs = "";
                for (var i = 0; i < res.data.length; i++) {
                    staffs += '<div class="form-group"><label class="middle"><input type="checkbox" value="' + res.data[i].id + '" class="ace" name="user-Character-0-0-0" ><span class="lbl">' + res.data[i].staffName + '</span></label></div>'
                }
                //第二种方法
                // <label class="middle"><input type="checkbox" value="" class="ace" name="user-Character-0-0-0" id="user-Character-0-0-2"><span class="lbl">李四</span></label>
//                for (var i  in staffsData ){
//                    staffs+= '<div class="form-group"><label class="middle"><input type="checkbox" value="'+staffsData[i].id+'" class="ace" name="user-Character-0-0-0" ><span class="lbl">'+staffsData[i].staffName+'</span></label></div>'
//                }
                $("#staffData").html(staffs);
            }
        })
        layer.open({
            type: 1,
            title: '设置员工',
            area: ['400px', ''],
            shadeClose: false,
            content: $('#add_administrator_style'),
        });
        //绑定员工角色
        $('#Add_Administrator').on('click', function () {

            //员工id
            var staffIds = [];
            $.each($('input:checkbox:checked'), function () {
                //依次获取选中的员工id值，将它存入数组中
                staffIds.push($(this).val());
            });
            //绑定员工角色
            $.post("/role/addStaffRole", {staffIds: staffIds, roleId: id}, function (res) {
                if (res.rs) {
                    layer.alert('绑定成功！', {
                        title: '提示框',
                        icon: 1,
                    });

                } else {
                    layer.alert("绑定失败");
                    location.reload();
                }
            })
        })
    }

    /*删除*/
    function member_del(obj, id, name) {

        layer.confirm('确认要删除吗？', function (index) {
            $.post("/role/deleteRole", {roleId: id}, function (res) {
                if (res.rs) {
                    layer.msg('已删除!', {icon: 1, time: 1000});
                    location.reload();
                } else {
                    layer.msg('删除失败!', {icon: 1, time: 1000});
                    location.reload();
                }
            })

        });
    }

    $("#deleteRoles").on('click', function () {

        if ($("input:checkbox[name='roleId']:checked").length <= 0) {
            layer.msg('请选择最少一条数据', {icon: 2});
            return
        }

        //员工id
        var roleIds = [];
        $.each($("input:checkbox[name='roleId']:checked"), function () {
            //依次获取选中的员工id值，将它存入数组中
            roleIds.push($(this).val());
        });
        //批量删除
        layer.confirm('确认要删除吗？', function (index) {
            $.post("/role/deleteRoles", {roleIds: roleIds}, function (res) {
                if (res.rs) {
                    layer.msg('已删除!', {icon: 1, time: 1000});
                    location.reload();
                } else {
                    layer.msg('删除失败!', {icon: 1, time: 1000});
                    location.reload();
                }
            })
        })
    });

    /*用户-停用*/
    function member_stop(obj, id, name) {
        layer.confirm('确认要停用吗？', function (index) {
            $.post("/role/updateStaus", {statues: "N", id: id}, function (res) {
                $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="fa fa-close bigger-120"></i></a>');
                $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
                $(obj).remove();
                layer.msg('已停用!', {icon: 5, time: 1000});
            })

        });
    }

    /*用户-启用*/
    function member_start(obj, id) {
        layer.confirm('确认要启用吗？', function (index) {
            $.post("/role/updateStaus", {statues: "Y", id: id}, function (res) {
                $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="fa fa-check  bigger-120"></i></a>');
                $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
                $(obj).remove();
                layer.msg('已启用!', {icon: 6, time: 1000});
            })
        });
    }

    $(function () {
        $("#administrator").fix({
            float: 'left',
            //minStatue : true,
            skin: 'green',
            durationTime: false,
            spacingw: 50,//设置隐藏时的距离
            spacingh: 270,//设置显示时间距
        });
    });
    //初始化宽度、高度
    $(".widget-box").height($(window).height() - 215);
    $(".table_menu_list").width($(window).width() - 260);
    $(".table_menu_list").height($(window).height() - 215);
    //当文档窗口发生改变时 触发
    $(window).resize(function () {
        $(".widget-box").height($(window).height() - 215);
        $(".table_menu_list").width($(window).width() - 260);
        $(".table_menu_list").height($(window).height() - 215);
    })
    //    laydate({
    //        elem: '#start',
    //        event: 'focus'
    //    });

    //表单验证提交
    /*$("#form-admin-add").Validform({

            // tiptype:2,

            callback:function(){
            //form[0].submit();
                 layer.msg("设置成功", {icon: data.status,time: 1000}, function(){
                        location.reload();//刷新页面
                        });
            //if(data.status==1){
           ////////         layer.msg(data.info, {icon: data.status,time: 1000}, function(){
             //           location.reload();//刷新页面
               //         });
              //  }
             //   else{
             //       layer.msg(data.info, {icon: data.status,time: 3000});
             //   }
            //	var index =parent.$("#iframe").attr("src");
            //	parent.layer.close(index);
                //
            }


        });	*/
</script>
<script type="text/javascript">

</script>